<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				管理
			</div>
			<div slot="right" @click="submit" v-if="custom==='false'">
				保存
			</div>
		</my-header>
		<div class="cont-nof">
			<div class="title oh">
				<div class="fl">
					<div class="title_1 tl">
						功能模块
					</div>
				</div>
				<div class="fl drag-tip">
					长按拖拽调整顺序
				</div>
			</div>
			<grid :draggable="true" :sortable="true" :items="items" :cellWidth="itemSize" :cellHeight="itemSize" @sort="sort">
				<template slot="cell" slot-scope="props">
					<div class="item-cell max flex">
						<div class="icon" :style="'background-color:' + props.item.color">
							<img :src="props.item.icon" alt="">
						</div>
						{{props.item.name}}
					</div>
				</template>
			</grid>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				itemSize: window.innerWidth / 4,
				items: [],
				custom: this.$Cookies.get('custom'),
				sort_list: [] //更改排序后的顺序
			}
		},
		methods: {
			sort(even) {
				this.sort_list = even.items.map(o => ({
					...o.item
				}))
			},
			submit() {
				this.$toast.show('保存中...', 'loading');
				this.$http.updateHomeMenu(this.sort_list).then(resp => {
					this.$toast.hide();
				})
			},
			queryMenu() {
				this.$http.fetchHomeMenu({
					loginType: this.$Cookies.get('loginType')
				}).then(resp => {
					this.items = resp.data;
				})
			}
		},
		created() {
			this.queryMenu();
		}
	}
</script>

<style scoped>
	.title {
		width: calc(100% - 3rem);
		margin: 1.5rem auto;
	}

	.title_1 {
		font-size: 1.6rem;
		border-left: 4px solid #36C12D;
		border-radius: 10px;
		width: 0;
		white-space: nowrap;
		text-indent: 1rem;
		line-height: 1.6rem;
		height: 1.6rem;
	}

	.drag-tip {
		margin-left: 8.4rem;
		height: 1.6rem;
		line-height: 1.6rem;
		font-size: 1.2rem;
		color: rgba(155, 155, 155, 1);
	}

	.item-cell {
		border: 1px solid rgba(238, 238, 238, 1);
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		font-size: 1.2rem;
		color: #000000;
	}

	.item-cell .icon {
		height: 4rem;
		width: 4rem;
		margin-bottom: 1rem;
		border-radius: 50%;
		overflow: hidden;
	}

	.item-cell img {
		width: 2rem;
		height: 2rem;
		margin-top: 1rem;
	}
</style>
